<template>
  <div id="goods03">
    <!-- 2.搜索商品 -->
    <div class="showDiv02">
      <img src="@/assets/li/top01.png" alt class="talentBanner" />
      <div class="showGoods" v-if="!boxShow">
        <div class="topBox">
          <div>
            <div data-v-378b4e67 class="notice-box"></div>
            对标达人匹配商品
          </div>
          <span class="history" @click="history">
            查看历史匹配记录
            <img src="@/assets/li/more.png" />
          </span>
        </div>
        <!-- 搜索结果 -->
        <div class="searchResult">
          <div class="searchBox searchBox01">
            <input
              type="text"
              maxlength="100"
              v-model="goodsWord"
              @keyup.enter="toSearchGoods01()"
              placeholder="请输入您的抖音昵称或抖音号"
            />
            <div @click="toSearchGoods01()">
              <img src="@/assets/meng/search01.png" />
            </div>
          </div>
          <p class="tips">请从以下列表中选择您的账号</p>
          <section style="min-height: 460px">
            <table class="table">
              <thead>
                <tr>
                  <th>达人</th>
                  <th>粉丝数</th>
                  <th>作品数</th>
                  <th>点赞数</th>

                  <th>操作</th>
                </tr>
              </thead>
              <tbody v-if="expertList.length != 0 && !loading">
                <tr v-for="(item, index) in expertList" :key="index">
                  <td>
                    <div class="goodsBox">
                      <img
                        :src="item.logo"
                        v-errorImg:talent
                        alt
                        class="avator"
                        @click="result(item.author_id)"
                      />

                      <div>
                        <p @click="result(item.author_id)">
                          {{ item.nickname }}
                          <img
                            v-if="item.verify_type == 1"
                            src="@/assets/meng/search_result02.png"
                            style="width: 16px; hight: 16px; margin-top: -5px"
                          />
                          <img
                            v-if="item.verify_type == 2"
                            src="@/assets/meng/search_result03.png"
                            style="width: 16px; hight: 16px; margin-top: -5px"
                          />
                        </p>

                        <p>抖音号 : {{ item.unique_id }}</p>
                      </div>
                    </div>
                  </td>
                  <td>{{ format_num(item.total_fans) }}</td>
                  <td>{{ format_num(item.total_video) }}</td>

                  <td>{{ format_num(item.total_favorite) }}</td>

                  <td>
                    <img
                      src="@/assets/wang/work/checked.png"
                      class="checkImg"
                      v-if="checked == item.author_id"
                    />
                    <img
                      src="@/assets/li/unselected.png"
                      class="checkImg1"
                      v-if="checked != item.author_id"
                      @click="checked = item.author_id"
                    />
                  </td>
                </tr>
              </tbody>
            </table>
            <div
              v-loading="loading"
              v-if="loading"
              class="loading"
              element-loading-text="拼命加载中..."
              element-loading-spinner="el-icon-loading"
            ></div>
            <div class="empty" v-show="this.expertList.length == 0 && !loading">
              <img src="@/assets/liu/zw.png" />
              <p style="margin-top: 0">暂时没有找到达人哦~</p>
              <div
                class="addIncludeBtn"
                @click="
                  showInclude = true;
                  clear_values();
                "
              >
                <img src="@/assets/wang/work/addIcon.png" alt />
                <span>添加收录</span>
              </div>
            </div>
          </section>

          <div class="pageBox" v-if="expertList.length != 0">
            <el-pagination
              background
              layout="prev, pager, next, jumper"
              :total="count"
              :page-size="10"
              :current-page="goodsPage"
              :hide-on-single-page="true"
              @current-change="toSearchGoods"
            ></el-pagination>
          </div>

          <div class="optionBtnBox" v-if="expertList.length != 0">
            <button @click="back">取消</button>
            <button @click="toMatch" v-if="!loading && expertList.length != 0">
              开始匹配
            </button>
            <button v-else class="nextButton nextButton01">开始匹配</button>
          </div>
        </div>
      </div>
    </div>
    <!-- 添加收录 -->
    <el-dialog
      :visible.sync="showInclude"
      width="600px"
      top="22.5vh"
      class="dialog01"
      @close="
        showInclude = false;
        includeWord = '';
        hasSearch = false;
      "
    >
      <div class="includeDialog">
        <p class="diaTitle">添加收录</p>
        <div class="input_group includeInput">
          <input
            type="text"
            v-model="includeWord"
            @keyup.enter="includeSearchOne()"
            placeholder="请输入抖音号进行搜索"
          />
          <div @click="includeSearchOne()">
            <img src="@/assets/meng/search01.png" />
          </div>
        </div>
        <div v-if="hasSearch">
          <div
            class="includeResult"
            v-if="includeList.length"
            @scroll.passive="getScroll($event)"
          >
            <div
              class="includeItem"
              v-for="(item, index) in includeList"
              :key="index"
            >
              <img
                :src="item.avatar_larger"
                v-errorImg:talent
                class="inLogo"
                @click="toTalentDetails(item.uid, item.exsit)"
              />
              <div class="nameBox">
                <p @click="toTalentDetails(item.uid, item.exsit)">
                  {{ item.title }}
                </p>
                <p>{{ item.text_fans }}</p>
              </div>
              <button
                class="toInclude"
                @click="toInclude(item.sec_uid, item.uid, item)"
                v-if="item.exsit == 0"
              >
                添加收录
              </button>
              <button v-if="item.exsit == 2">正在收录</button>
              <button v-if="item.exsit == 1">已收录</button>
            </div>
            <p v-if="!loading01 && includeData" class="includeText">
              找不到想找的账号？
              <el-popover placement="right" trigger="hover" popper-class="popoverBox">
                <img src="@/assets/img/xiaozhushou_qr.jpg" class="codeImg" />
                <span slot="reference" class="codeShow">告诉我们</span>
              </el-popover>
            </p>
          </div>
          <div
            v-loading="loading01"
            v-if="loading01"
            class="loading"
            element-loading-text="拼命加载中..."
            element-loading-spinner="el-icon-loading"
          ></div>
          <div
            class="empty"
            v-show="!loading01 && includeList.length == 0 && !retryShow"
          >
            <img src="@/assets/wang/work/noResult.png" />
            <!-- <p>您输入的结果正火速赶来，请您稍后再试~</p> -->
            <p>请输入抖音号或抖音昵称进行收录</p>
          </div>
          <div
            v-show="!loading01 && retryShow && includeList.length != 0"
            @click="includeSearch()"
            class="retryBox"
          >
            <div class="imgBox"></div>

            <p>请点击重试</p>
          </div>
          <div
            @click="includeSearch()"
            class="retryBox retryBox1"
            v-show="!loading01 && retryShow && includeList.length == 0"
          >
            <div class="imgBox"></div>
            <p>请点击重试</p>
          </div>
        </div>
      </div>
    </el-dialog>
    <!-- 剩余次数 -->
    <el-dialog
      :visible.sync="useCountPop"
      :show-close="false"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      width="400px"
    >
      <div class="useCountBox">
        <p class="text01">{{ vipName }}每月可使用{{ numberofvisits }}次</p>
        <p class="text02">
          当前已使用
          <span>{{ numberofvisits - surplusCount }}次</span>，剩余
          <span>{{ surplusCount }}次</span>，
        </p>
        <p class="text03">
          本次查询将消耗
          <span>1次</span>机会，确认查询吗？
        </p>
        <div class="optionBox">
          <button
            class="upgradeBtn"
            v-if="surplusCount == 0 && isMaxVip == false"
            @click="toBuy"
          >
            升级会员
          </button>
          <el-popover placement="bottom" trigger="hover">
            <div class="message_content">
              <div class="popper_arrow"></div>
              <img src="@/assets/shi/qr_img.jpg" />
              <div>工作日：9:30--18:30</div>
            </div>
            <button
              class="upgradeBtn"
              v-if="surplusCount == 0 && isMaxVip == true"
              slot="reference"
            >
              联系客服
            </button>
          </el-popover>
          <button
            class="upgradeBtn"
            v-if="surplusCount > 0"
            @click="
              useCountPop = false;
              boxShow = true;
              getGoodId();
            "
          >
            确定
          </button>
          <button
            class="cancelBtn"
            v-if="surplusCount > 0"
            @click="useCountPop = false"
          >
            取消
          </button>
          <button
            class="cancelBtn"
            v-if="surplusCount == 0"
            @click="useCountPop = false"
          >
            取消
          </button>
        </div>
      </div>
    </el-dialog>
    <div class="boxShow" v-if="boxShow">
      <div class="boxShow_02">
        <div
          v-loading="showLoading1"
          class="showLoading1"
          element-loading-spinner="el-icon-loading"
        ></div>
        正在为您匹配中，请于3分钟后在历史匹配记录 中查看匹配结果
      </div>
      <button class="matching02" @click="history()">我知道了</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isNull: false,
      goodsWord: window.localStorage.getItem("goodsWord"),
      goodsPage: 1,
      expertList: [],
      count: 0,
      checked: "",
      loading: true,
      showInclude: false,
      includeWord: "",
      hasSearch: false,
      loading01: false,
      includeList: [],
      includePage: 1,
      includeData: false,
      retryShow: false,
      //剩余次数
      useCountPop: false,
      numberofvisits: 0, //总次数
      surplusCount: 0, //剩余次数
      vipName: "",
      isMaxVip: Boolean, //是否是最高级别的会员
      useCountPop: false,
      boxShow: false,
      showLoading1: true,
      uLevel:localStorage.getItem('vipLevel')
    };
  },
  computed: {},
  watch: {
    goodsWord: function () {
      if (this.goodsWord == "") {
        this.goodsPage = 1;
        this.expertList = [];
        this.checked = "";
        this.toSearchGoods();
      }
    },
  },
  created() {
    this.toSearchGoods();
    document.title = "智能找商品&智能分析服务平台-掌上精选";
  },

  methods: {
    //次数
    toMatch() {
      let that = this;
      that.$axios
        .get("/api/customer/GetNumberofvisitsDetailed", {
          params: {
            API: "/api/intelligent/authormatching", //要访问的接口地址
          },
        })
        .then((res) => {
          if (res.data.code == 0) {
            // 0是不限制次数
            // if (res.data.data.numberofvisits > 0) {
              that.numberofvisits = res.data.data.numberofvisits; //限制次数
              that.vipName = res.data.data.vipName; //vipname
              that.surplusCount = res.data.data.surplusCount; //剩余次数
              that.isMaxVip = res.data.data.isMaxVip; //是否是最高级别的会员
              that.useCountPop = true;
            // } else {
            //   that.productmatch();
            // }
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 匹配商品
    getGoodId() {
      this.$axios
        .post("api/intelligent/authormatching", {
          AuthorId: this.checked,
        })
        .then((res) => {})
        .catch((err) => {
          console.log(err);
        });
    },
    clear_values() {
      this.includeWord = this.goodsWord; //文本内容赋值到添加收入的框中
      this.goodsWord = "";
      this.includeSearch();
    },
    includeSearchOne() {
      this.includePage = 1;
      this.includeList = [];
      this.includeSearch();
    },
    // 查询收录
    includeSearch() {
      let that = this;
      that.hasSearch = true;
      that.loading01 = true;
      this.retryShow = false;
      that.$axios
        .get(
          "/api/author/GetAuthorSearch",
          {
            params: {
              keyword: that.includeWord,
              page: this.includePage,
            },
          },
          {
            cancelToken: new that.$axios.CancelToken(function executor(c) {
              if (that.cancel03 != null) {
                that.cancel03();
              }
              that.cancel03 = c;
            }),
          }
        )
        .then((res) => {
          that.loading01 = false;
          if (res.data.code == 0) {
            if (res.data.data.length) {
              this.includeData = false;
              this.includePage += 1;
              this.includeList = this.includeList.concat(res.data.data);
            }
            if (res.data.data.length < 10 || !res.data.data) {
              this.includeData = true;
            }
            this.retryShow = false;
          } else if (res.data.code == 1001) {
            this.retryShow = true;
            this.includeData = false;
          } else if (res.data.code == 1002) {
            this.includeData = true;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getScroll(event) {
      let scrollBottom =
        event.target.scrollHeight -
        event.target.scrollTop -
        event.target.clientHeight;

      if (
        scrollBottom == 0 &&
        this.includeData == false &&
        this.retryShow == false
      ) {
        this.includeSearch();
      }
      // }
    },
    // 确认收录
    toInclude(sec_uid, uid, item) {
      let that = this;
      that.$axios
        .post(
          "/api/author/include",
          {
            sec_uid: sec_uid,
            uid: uid,
          },
          {
            cancelToken: new that.$axios.CancelToken(function executor(c) {
              if (that.cancel04 != null) {
                that.cancel04();
              }
              that.cancel04 = c;
            }),
          }
        )
        .then((res) => {
          if (res.data.code == 0) {
            this.$message({
              message:
                "收录成功，我们将在10分钟内完成部分数据收录，请您稍后再试~",
              duration: 2000,
              customClass: "includeMessage",
              offset: 154,
            });
            item.exsit = 2;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    toSearchGoods01() {
      this.checked = "";
      this.toSearchGoods();
    },
    // 搜索
    toSearchGoods(cpage) {
      let that = this;
      if (cpage) {
        that.goodsPage = cpage;
        that.backTop();
      }
      that.loading = true;
      that.expertList = [];
      that.$axios
        .post(
          "api/author/SearchExtendOne",
          {
            keyword: that.trimStr(that.goodsWord),
            fans: "不限",
            favorite_count: "不限",
            video_count: "不限",
            verify_type: "3",
            page: that.goodsPage,
            size: "8",
            order_by: "desc",
            sort: "CreateTime",
          },
          {
            cancelToken: new that.$axios.CancelToken(function executor(c) {
              if (that.cancel != null) {
                that.cancel();
              }
              that.cancel = c;
            }),
          }
        )
        .then((res) => {
          that.loading = false;
          if (res.data.code == 0) {
            if (res.data.count > 200) {
              that.count = 200;
            } else {
              that.count = res.data.count;
            }
            that.expertList = res.data.data;
            if (that.checked == "") {
              that.checked = that.expertList[0].author_id;
            }
          } else {
            that.expertList = [];
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 升级会员
    toBuy() {
      // let router = this.$router.resolve({
      //   path: `/talent_main/buy/0`
      // });
      // window.open(router.href, "_blank");
      this.useCountPop = true;
      let goLevel = this.upLevel(this.uLevel);
      let router = this.$router.resolve({
        path: `/talent_main/buy?l=${goLevel}`,
      });
      window.open(router.href, '_blank');
      
    },
    upLevel(level) {  //根据次数权限，获取比当前等级高一级的会员等级
      let aLevel = '';
      if(level == 0 || level == 3){ //免费版、体验版跳到vip
        aLevel = 4;
      }else if(level == 4){ //vip跳到svip，
        aLevel = 5;
      }else if(level == 5 || level == 1){ //vip企业版和svip个人版触发权限判断时，都跳到plus，
        aLevel = 2;
      }
      return aLevel;
    },
    back() {
      this.$router.push(`/inAnalysis/SearchGoods`);
    },
    toTalentDetails(id, exsit) {
      //  已收录的可以跳到详情
      if (exsit == 1) {
        let router = this.$router.resolve({
          path: `/talent_main/tdetails/${id}/0`,
        });
        window.open(router.href, "_blank");
      }
    },
    result(id) {
      let router = this.$router.resolve({
        path: `/talent_main/tdetails/${id}/0`,
      });
      window.open(router.href, "_blank");
    },

    history() {
      this.boxShow = false;
      this.goodsWord == "";
      let router = this.$router.resolve({
        path: `/inAnalysis/historyGoods`,
      });
      window.open(router.href, "_blank");
    },
    backTop() {
      document.body.scrollTop = document.documentElement.scrollTop = 0;
    },
  },
};
</script>
<style lang="less" scoped>
#goods03 {
  background-color: #f5f5f5;
  padding-top: 14px;
  .history {
    > img {
      width: 7px;
      height: 11px;
      margin-left: 5px;
      margin-top: -3px;
    }
  }
  .showDiv02 {
    overflow: hidden;
    width: 1200px;
    margin: 0 auto;

    .talentBanner {
      width: 1201px;
      height: 54px;
      border-radius: 4px;
      margin-bottom: 13px;
    }

    .goodsIcon {
      width: 455px;
      height: 64px;
      display: block;
      margin: auto;
    }

    .showGoods {
      width: 100%;
      min-height: 822px;
      background-color: #ffffff;
      border-radius: 4px;
      padding: 20px;
      box-sizing: border-box;
      .topBox {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .notice-box {
          display: inline-block;
          width: 4px;
          height: 16px;
          border-radius: 100px;
          margin-right: 10px;
          background-color: #fd7f2c;
          margin-top: 1px;
        }
        > div {
          font-size: 16px;
          color: #222;
          font-weight: 600;

          display: flex;
          align-items: center;
        }
        span {
          font-size: 14px;
          color: #fd7f2c;
          cursor: pointer;
        }
      }

      .tips {
        font-size: 14px;
        color: #888888;
        padding-top: 20px;
        padding-bottom: 10px;
      }
      //   table
      table {
        thead {
          img {
            width: 5px;
            height: 10px;
            vertical-align: 0;
            margin-right: 2px;
            cursor: pointer;
          }
          tr {
            th:nth-child(1) {
              text-align: left;
              padding-left: 52px;
              width: 325px;
            }
            th:last-child {
              width: 140px;
            }
          }
        }
        tbody {
          position: relative;
          tr {
            height: 77px;
            td {
              text-align: center;
            }
            td:nth-child(2),
            td:nth-child(3),
            td:nth-child(4) {
              font-size: 15px;
              color: #222222;
              font-family: DINAlternate-Bold;
            }
          }
        }
        .goodsBox {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          padding-left: 26px;
          cursor: pointer;
          .avator {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            border: 1px solid #e5e5e5;
            margin-right: 15px;
          }
          div {
            text-align: left;
            p:nth-child(1) {
              font-size: 14px;
              font-weight: 600;
              letter-spacing: 0px;
              color: #222222;
              cursor: pointer;
            }
            p:nth-child(1):hover {
              color: #fd7f2c;
            }
            p:nth-child(2) {
              font-size: 14px;
              font-weight: normal;
              letter-spacing: 0px;
              color: #888;
            }
          }
        }
        .checkImg {
          width: 20px;
          height: 20px;
          cursor: pointer;
        }
        .checkImg1 {
          width: 19px;
          height: 19px;
          cursor: pointer;
        }
      }

      .a01 {
        height: 460px;
        line-height: 500px;
        text-align: center;
        font-size: 14px;
        color: #888;
        font-size: 16px;
      }
      // 按钮
      .optionBtnBox {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 10px;
        margin-bottom: 10px;
        button:nth-child(1) {
          width: 115px;
          height: 40px;
          border-radius: 4px;
          border: solid 1px #fd7f2c;
          font-size: 14px;
          color: #fd7f2c;
        }
        button:nth-child(2) {
          width: 115px;
          height: 40px;
          background-color: #fd7f2c;
          border-radius: 4px;
          font-size: 14px;
          color: #ffffff;
          margin-left: 50px;
        }
        .nextButton {
          width: 115px;
          height: 40px;
          background-color: #fd7f2c;
          border-radius: 4px;
          font-size: 14px;
          color: #ffffff;
          margin-left: 50px;
        }
        .nextButton01 {
          background-color: #cfcfcf !important;
        }
      }
    }
  }

  .searchBox {
    width: 513px;
    height: 51px;
    border-radius: 4px;
    border: solid 1px #e6e6e6;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto;
    margin-top: 216px;
    input {
      width: 436px;
      height: 51px;
      line-height: 51px;
      border: none;
      padding-left: 21px;
      padding-right: 21px;
      color: #222;
      font-size: 16px;
    }
    input::-webkit-input-placeholder {
      color: #b5b5b5 !important;
    }
    div {
      width: 77px;
      height: 51px;
      background-color: #fd7f2c;
      border-radius: 4px;
      position: relative;
      img {
        cursor: pointer;
        width: 21px;
        height: 20px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    }
  }
  .searchBox01 {
    width: 400px;
    height: 40px;
    margin-top: 20px;
    margin-left: 0;
    input {
      width: 360px;
      height: 40px;
      line-height: 40px;
    }
    div {
      width: 60px;
      height: 40px;
      img {
        width: 16px;
        height: 16px;
      }
    }
  }

  .addIncludeBtn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 110px;
    height: 40px;
    line-height: 40px;
    background-color: #fd7f2c;
    border-radius: 4px;
    margin: 0 auto;
    margin-top: 30px;
    cursor: pointer;
    img {
      width: 16px;
      height: 16px;
      margin-right: 5px;
    }
    span {
      font-size: 14px;
      color: #ffffff;
    }
  }
}
.includeDialog {
  box-sizing: border-box;
  padding: 30px;
  padding-right: 12px;
  // padding-bottom: 60px;
  border-radius: 4px;
  .diaTitle {
    font-size: 16px;
    font-weight: 600;
    color: #222222;
    padding-bottom: 20px;
  }
}
.includeInput {
  width: 530px !important;
}
.includeResult {
  height: 356px;
  overflow-y: auto;

  .includeItem {
    height: 92px;
    border-bottom: 1px solid #e5e5e5;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .inLogo {
      cursor: pointer;
      width: 50px;
      height: 50px;
      border: 1px solid #e5e5e5;
      border-radius: 50%;
      margin-right: 14px;
    }
    .nameBox {
      flex: 1;
      text-align: left;
      p:nth-child(1) {
        font-size: 16px;
        color: #222222;
        cursor: pointer;
      }
      p:nth-child(2) {
        font-size: 14px;
        color: #555555;
        padding-top: 3px;
      }
    }
    button {
      width: 88px;
      height: 32px;
      // background-color: #fff2e9;
      background-color: #f5f5f5;
      border-radius: 4px;
      font-size: 14px;
      color: #fd7f2c;
      margin-right: 22px;
    }
    .toInclude {
      background-color: #fd7f2c;
      color: #ffffff;
    }
  }
  .includeText {
    height: 30px;
    font-size: 14px;
    margin-top: 20px;
    text-align: center;
    color: #888888;
    span {
      color: #fd7f2c;
    }
  }
}
.input_group {
  position: relative;
  width: 400px;
  height: 42px; // 边框为1时高度为40px
  border-radius: 4px 4px 4px 4px;
  border: solid 2px #fd7f2c;
  // border: solid 1px #e6e6e6;
  box-sizing: border-box;
  input {
    width: 100%;
    font-size: 14px;
    height: 38px;
    line-height: 38px;
    box-sizing: border-box;
    padding-left: 19px;
    padding-right: 70px;
    border: none;
    border-radius: 4px 4px 4px 4px;
  }
  > div {
    position: absolute;
    right: 0;
    cursor: pointer;
    top: -1px;
    text-align: center;
    width: 60px;
    height: 40px;
    background-color: #fd7f2c;
    border-radius: 0px 4px 4px 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    img {
      width: 16px;
    }
  }
}
.codeImg {
  width: 100px;
  height: 100px;
}
.retryBox {
  cursor: pointer;
  font-size: 14px;
  color: #888888;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin-top: 13px;
  .imgBox {
    width: 34px;
    height: 36px;
    margin-bottom: 13px;
    background-image: url("../../../assets/li/refresh1.png");
  }
  .imgBox:hover {
    background-image: url("../../../assets/li/refresh2.png");
  }
}
.retryBox1 {
  width: 531px;
  height: 397px;
} // 弹窗
.useCountBox {
  box-sizing: border-box;
  width: 400px;
  height: 260px;
  background-color: #ffffff;
  border-radius: 4px;
  p {
    text-align: center;
    span {
      font-size: 16px;
      color: #fd7f2c;
    }
  }
  .text01 {
    font-size: 20px;
    color: #222222;
    padding-top: 43px;
  }
  .text02 {
    padding-top: 16px;
    font-size: 16px;
    color: #555555;
    line-height: 30px;
  }
  .text03 {
    font-size: 16px;
    color: #555555;
    line-height: 30px;
  }
  .optionBox {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 40px;
    .upgradeBtn {
      width: 120px;
      height: 44px;
      background-color: #fd7f2c;
      border-radius: 4px;
      font-size: 16px;
      color: #ffffff;
    }
    .cancelBtn {
      width: 120px;
      height: 44px;
      border-radius: 4px;
      border: solid 1px #fd7f2c;
      font-size: 16px;
      color: #fd7f2c;
      margin-left: 30px;
    }
  }
}
.boxShow {
  background-color: #ffffff;
  width: 1200px;
  height: 774px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 66;
  background-position: 0px 0px;
  font-size: 14px;
  font-weight: normal;
  color: #222222;

  &::after {
    width: 100%;
    height: 100%;
    content: "";

    background: url("../../../assets/li/goods04.png") no-repeat;
    z-index: 66;
    filter: blur(10px);
  }
  .boxShow_02 {
    z-index: 68;
    position: absolute;
  }
}
.matching02 {
  width: 115px;
  height: 40px;
  background-color: #fd7f2c;
  border-radius: 4px;
  font-size: 14px;
  color: #ffffff;
  margin-top: 100px;
  z-index: 68;
  position: absolute;
}
</style>
